<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
</head>
<div id="p" data-type="panel" title="基本用法-autocomplete和远程数据源列表,输入-哈哈、呵呵、嘿嘿测试" data-define="fit:true,headerCls:'panel_header_cls_bbw'"
	style="padding: 5px;">
	<form id="simple_form_com_border" method="post" enctype="multipart/form-data" data-type="form"
		action="${rc.contextPath}/demo/submitForm.do">
		<table class="stable" cellpadding="1" cellspacing="1">
			<tr>
				<td width="15%" class="stdlabelnoborder">文本录入框(邮箱校验)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="inputbox" type="text" name="name2"
						data-define="required:true,border:true,validType:'email',validType:'length[0,20]'"></input>
				</td>
				<td width="15%" class="stdlabelnoborder" title="文本录入框(自定义校验)">文本录入框(长度校验)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="inputbox" type="text" name="name4" data-define="required:true,border:true,validType:'length[0,10]'"></input>
				</td>
				<td width="15%" class="stdlabelnoborder">文件选择</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="filebox" type="text" name="name_file1" data-define="required:true,border:true,tipPosition:'left'"></input>
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">录入框(带小图标)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="inputiconbox" name="name1"
						data-define="iconClick:searcherTest,required:true,border:true,validType:'length[0,5]'"></input>
				</td>
				<td width="15%" class="stdlabelnoborder">录入框(自定义图标)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="inputiconbox" name="name1" data-define="iconCls:'logout',required:true,border:true,validType:'length[0,5]'"></input>
				</td>
				<td width="15%" class="stdlabelnoborder">文件选择(自定义图标)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="filebox" type="text" name="name_file2"
						data-define="iconCls:'file_y',required:true,border:true,tipPosition:'left'"></input>
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">下拉列表(多选)</td>
				<td width="15%" class="stdinputnoborder">
					<select name="name5" data-type="combogrid"
						data-define="required:true,border:true,multiple:true,panelWidth:500,ptborder:false,
									idField: 'itemid',textField: 'productname',fitColumns: true,
									method:'post',url: '${rc.contextPath}/demo/getDataGrid.do',
									columns: [[
										{field:'ck',checkbox:true},
										{field:'itemid',title:'ID',width:80},
										{field:'productname',title:'产品名称',width:190},
										{field:'listprice',title:'成本',width:80,align:'right'},
										{field:'unitcost',title:'单价',width:80,align:'right'},
										{field:'attr1',title:'属性',width:200},
										{field:'status',title:'状态',width:60,align:'center'}

									]]
								">
					</select>
				</td>
				<td width="15%" class="stdlabelnoborder">下拉列表(单选)</td>
				<td width="15%" class="stdinputnoborder">
					<select name="name3" data-type="combogrid"
						data-define="required:true,border:true,panelWidth:500,ptborder:false,
									idField: 'itemid',textField: 'productname',multiple: false,fitColumns: true,
									method:'post',url: '${rc.contextPath}/demo/getDataGrid.do',
									tipPosition:'left',
									columns: [[
										{field:'itemid',title:'ID',width:80},
										{field:'productname',title:'产品名称',width:190},
										{field:'listprice',title:'成本',width:80,align:'right'},
										{field:'unitcost',title:'单价',width:80,align:'right'},
										{field:'attr1',title:'属性',width:200},
										{field:'status',title:'状态',width:60,align:'center'}
									]]
								">
					</select>
				</td>
				<td width="15%" class="stdlabelnoborder">整数</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="numberbox" type="text" name="name6" data-define="min:10,max:90,required:true,border:true,tipPosition:'left'"></input>
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">下拉列表(远程-多选-有默认源)</td>
				<td width="15%" class="stdinputnoborder">
					<select name="name_cgrid1" data-type="combogrid"
						data-define="required:true,border:true,multiple:true,mode:'remote',panelWidth:500,ptborder:false,
									idField: 'itemid',textField: 'productname',fitColumns: true,
									method:'post',url: '${rc.contextPath}/demo/getDataGridRemote.do',
									columns: [[
										{field:'ck',checkbox:true},
										{field:'itemid',title:'ID',width:80},
										{field:'productname',title:'产品名称',width:190},
										{field:'listprice',title:'成本',width:80,align:'right'},
										{field:'unitcost',title:'单价',width:80,align:'right'},
										{field:'attr1',title:'属性',width:200},
										{field:'status',title:'状态',width:60,align:'center'}

									]]
								">
					</select>
				</td>
				<td width="15%" class="stdlabelnoborder">下拉列表(远程-单选-无默认源)</td>
				<td width="15%" class="stdinputnoborder">
					<select name="name_cgrid2" data-type="combogrid"
						data-define="required:true,border:true,mode:'remote',initData:false,panelWidth:500,ptborder:false,
									idField: 'itemid',textField: 'productname',multiple: false,fitColumns: true,
									method:'post',url: '${rc.contextPath}/demo/getDataGridRemote.do',
									tipPosition:'right',
									columns: [[
										{field:'itemid',title:'ID',width:80},
										{field:'productname',title:'产品名称',width:190},
										{field:'listprice',title:'成本',width:80,align:'right'},
										{field:'unitcost',title:'单价',width:80,align:'right'},
										{field:'attr1',title:'属性',width:200},
										{field:'status',title:'状态',width:60,align:'center'}
									]]
								">
					</select>
				</td>
				<td width="15%" class="stdlabelnoborder">下拉列表(远程-分页)</td>
				<td width="15%" class="stdinputnoborder">
					<select name="name_cgrid3" data-type="combogrid"
						data-define="required:true,border:true,mode:'remote',pagination:true,pageSize:10,ptborder:false,
									idField: 'itemid',textField: 'productname',panelWidth:700,
									multiple: false,fitColumns: true,
									method:'post',url: '${rc.contextPath}/demo/getDataGridRemote.do',
									tipPosition:'left',
									columns: [[
										{field:'itemid',title:'ID',width:80},
										{field:'productname',title:'产品名称',width:190},
										{field:'listprice',title:'成本',width:80,align:'right'},
										{field:'unitcost',title:'单价',width:80,align:'right'},
										{field:'attr1',title:'属性',width:200},
										{field:'status',title:'状态',width:60,align:'center'}
									]]
								">
					</select>
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">浮点数</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="numberbox" type="text" name="name7" data-define="min:0.00,max:99.99,precision:2,required:true,border:true,"></input>
				</td>
				<td width="15%" class="stdlabelnoborder">数字格式化</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="numberbox" value="1234567.89" name="name8"
						data-define="min:0.00,max:99.99,precision:2,groupSeparator:',',decimalSeparator:'.',required:true,border:true,"></input>
				</td>
				<td width="15%" class="stdlabelnoborder">时间选择</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="timespinner" type="text" name="name9"
						data-define="min:'08:30',max:'18:00',required:true,border:true,tipPosition:'left'"></input>
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">日期</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="datebox" type="text" name="name10" data-define="required:true,border:true," />
				</td>
				<td width="15%" class="stdlabelnoborder">下拉树(多选)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="combotree" name="name11"
						data-define="panelHeight: 220,multiple:true,onlyLeafCheck:true,
							method:'post',url: '${rc.contextPath}/demo/getTree.do',
							required:true,border:true," />
				</td>
				<td width="15%" class="stdlabelnoborder">下拉树(单选)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="combotree" name="name14"
						data-define="panelHeight: 220,multiple:false,onlyLeafCheck:true,
							method:'post',url: '${rc.contextPath}/demo/getTree.do',
							required:true,border:true,tipPosition:'left'" />
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">日期(带时间)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="datetimebox" name="name13" data-define="required:true,border:true,tipPosition:'left'" />
				</td>
				<td width="15%" class="stdlabelnoborder">下拉框(单选)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="combobox" name="name12"
						data-define="required:true,border:true,method:'post',url: '${rc.contextPath}/demo/getCombo.do',
								valueField:'id',textField:'text',
								multiple:false,
								formatter: formatItem
								" />
				</td>
				<td width="15%" class="stdlabelnoborder">下拉框(多选)</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="combobox" name="name15"
						data-define="required:true,border:true,
								method:'post',url: '${rc.contextPath}/demo/getCombo.do',
								valueField:'id',textField:'text',
								multiple:true,
								formatter: formatItem,tipPosition:'left'
								" />
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">autocomplete(单选-无默认源)</td>
				<td width="15%" class="stdinputnoborder">
					<input id="autocomplete_s1_cborder" data-type="combobox" name="namea1"
						data-define="required:true,border:true,mode:'remote',initData:false,
								method:'post',url: '${rc.contextPath}/demo/getAutoComplete.do',
								valueField:'id',textField:'text',
								multiple:false,onIconClick:onIconClickFun,
								formatter: formatItem,tipPosition:'right'
								" />
				</td>
				<td width="15%" class="stdlabelnoborder">autocomplete(多选-有默认源)</td>
				<td width="15%" class="stdinputnoborder">
					<input id="autocomplete_s2_cborder" data-type="combobox" name="namea2"
						data-define="required:true,border:true,mode:'remote',
								method:'post',url: '${rc.contextPath}/demo/getAutoComplete.do',
								valueField:'id',textField:'text',
								multiple:true,onIconClick:onIconClickFun2,
								formatter: formatItem,tipPosition:'left'
								" />
				</td>
				<td width="15%" class="stdlabelnoborder">autocomplete(只读)</td>
				<td width="15%" class="stdinputnoborder">
					<input id="autocomplete_s3" data-type="combobox" name="namea3"
						data-define="required:true,border:true,mode:'remote',
								method:'post',url: '${rc.contextPath}/demo/getAutoComplete.do',
								valueField:'id',textField:'text',disabled:true,
								multiple:true,hasDownArrow:false,tipPosition:'left'
								" />
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">数字选择</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="numberspinner" type="text" value="999" name="name16"
						data-define="min:10,max:100,increment:10,required:true,border:true,"></input>
				</td>
				<td width="15%" class="stdlabelnoborder">数字选择</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="numberspinner" type="text" name="name17" data-define="min:10,max:100,increment:10,required:true,border:true,"></input>
				</td>
				<td width="15%" class="stdlabelnoborder">数字选择</td>
				<td width="15%" class="stdinputnoborder">
					<input data-type="numberspinner" type="text" name="name18"
						data-define="min:10,max:100,increment:10,required:true,border:true,tipPosition:'left'"></input>
				</td>
			</tr>
			<tr>
				<td width="15%" class="stdlabelnoborder">备注</td>
				<td colspan="5" width="85%" class="stdinputnoborder">
					<textarea data-type="inputbox" name="name19" style="width: 100%; height: 60px;"
						data-define="required:true,border:true,tipPosition:'left',validType:'length[0,200]'"></textarea>
				</td>
			</tr>
		</table>
	</form>
	<div style="float: right; padding-top: 5px;">
		<a href="javascript:void(0)" data-type="button" data-define="iconCls:'icon-ok'" onclick="setFormValues()">赋值</a>
		<a href="javascript:void(0)" data-type="button" data-define="iconCls:'icon-ok'" style="width: 100px;"
			onclick="setFormValuesByTest()">测试动态赋值</a>
		<a href="javascript:void(0)" data-type="button" data-define="iconCls:'icon-ok'" onclick="getFormValue()">取值</a>
		<a href="javascript:void(0)" data-type="button" data-define="iconCls:'icon-delete'">删除</a>
		<a href="javascript:void(0)" data-type="button" data-define="iconCls:'icon-save'" onclick="submitForm()">保存</a>
		<a href="javascript:void(0)" data-type="button" data-define="iconCls:'icon-reload'" onclick="clearFormValues()">清空</a>
	</div>
</div>
<div id="w" data-type="window" title="XXX信息查询"
	data-define="minimizable:false,collapsible:false,modal:true,closed:true,iconCls:'icon-search'"
	style="width: 880px; height: 520px; padding: 1px;"></div>
<script type="text/javascript">
	function formatItem(row) {
	    var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' + '<span>' + row.desc + '</span>';
	    return s;
    }
    function searcherTest(obj) {
	    $("#w").window("open");
	    $("#w").window("refresh", "window.html");
    }
    function getFormValue() {
	    var formValues = $("#simple_form_com_border").form("getValues");
	    alert(JSON.stringify(formValues));
    }
    function clearFormValues() {
	    $("#simple_form_com_border").form("clear");
    }
    function setFormValues() {
	    $('#simple_form_com_border').form('load', '${rc.contextPath}/demo/loadFormData.do');
    }
    function setFormValuesByTest() {
	    $("#simple_form_com_border").form("setTestValues");
    }
    function submitForm() {
	    //$("#simple_form_com_border").form("submit", {});
	    $.messager.alert("ajax提交表单",".......................");
    }
    function onIconClickFun() {
	    $("#autocomplete_s1_cborder").combobox("setAutoCompleteValue", 1);
    }
    function onIconClickFun2() {
	    $("#autocomplete_s2_cborder").combobox("setAutoCompleteValue", "1,2,3");
    }
</script>
</html>
